<script>
// 应用
import * as types from '@/store/types';
import { getLocalTime } from '@/utils/helps';
import WorkSpaceQuery from '../../mixins/WorkspaceQuery';
import img from '../../assets/dashboard/logowhite.png';
export default {
  name: 'App',
  mixins: [WorkSpaceQuery],
  data() {
    return {
      appName: '',
      newApp: false,
      setApp: false,
      appType: 0,
      appTitle: '',
      appDes: '',
      appList: [
        // { id: 't001', name: '智慧国土2', "status": 0, 'alterTime': '2018/01/01', img: 'src/assets/dashboard/logo.png' },
      ],
    };
  },
  async created() {
    const getAppList = await this.getAppList(
      {
        typeId: '40031',
      },
      1,
      100
    );
    getAppList.data.dataSource.forEach(item => {
      this.appList.push({
        id: item.id,
        name: item.name,
        status: 0,
        alterTime: getLocalTime(item.createTime),
        img: require('../../assets/covers/2.jpg'),
      });
    });
  },
  methods: {
    addNewApp() {
      this.newApp = true;
    },
    addApp() {
      this.newApp = false;
      if (this.appType === 'workspace') {
        this.setApp = true;
      } else {
        this.$router.push(`/${this.appType}`);
      }
    },
    async setNewApp() {
      // 新建一个空的应用
      const response = await api.datav.addApp({
        appExEntity: {
          path: '',
          info: JSON.stringify({}),
          data: '',
        },
        infoEntity: {
          alias: this.appTitle,
          description: this.appDes,
          name: this.appTitle,
          orgId: this.$store.state.user.info.orgid,
          typeId: '40031',
          userId: this.$store.state.user.info.id,
          tag: '',
          thumbUri: '',
        },
      });
      this.$store.commit(types.UPDATA_APP_DATA, {
        id: response.data,
        name: this.appTitle,
      });
      this.$router.push(`/${this.appType}/${response.data}`);
    },
    showApp(item) {
      this.$store.commit(types.UPDATA_APP_DATA, {
        id: item.id,
        name: item.name,
      });
      this.$router.push('/workspace/' + item.id);
    },
  },
};
</script>
<template>
  <div>
    <div class="searchApp">
      <Input
        v-model="appName"
        placeholder="搜索..."
        style="width:300px"
        icon="search"></Input>
      <Button @click="addNewApp">新建应用</Button>
      <Modal
        v-model="newApp"
        width="360"
        @on-ok="addApp">
        <p
          slot="header"
          style="text-align:center">
          新建应用
        </p>
        <div
          class="newAppbtn"
          style="text-align:center">
          <Button @click="appType='workspace'">图文</Button>
          <Button @click="appType='slidefilm'">报表</Button>
          <Button @click="appType='customize'">定制</Button>
        </div>
      </Modal>
      <Modal
        v-model="setApp"
        class="addapp"
        width="360"
        @on-ok="setNewApp">
        <p slot="header">
          <span>新建应用</span>
        </p>
        <div>
          <Row>
            <span>名称：</span>
            <Input v-model="appTitle"></Input>
          </Row>
          <Row>
            <span>描述：</span>
            <Input v-model="appDes"></Input>
          </Row>
        </div>
      </Modal>
    </div>
    <div class="app">
      <Row
        type="flex"
        justify="start"
        class="code-row-bg">
        <Card
          v-for="item in appList"
          :key="item.id"
          @click.native="showApp(item)">
          <div class="appdata">
            <img :src="item.img">
          </div>
          <div>
            <Row>
              <Col span="18">
              <h4>{{ item.name }}</h4>
              </Col>
              <Col
                v-if="item.status===0"
                span="6"
              >
              <p>
                <Icon type="ios-person"></Icon>
                <span>私有</span>
              </p>
              </Col>
              <Col
                v-if="item.status===1"
                span="6"
              >
              <Icon type="ios-people"></Icon>
              <span>公有</span>
              </Col>
            </Row>
            <Row>
              <Icon type="calendar"></Icon>
              <span>{{ item.alterTime }}</span>
            </Row>
          </div>
        </Card>
      </Row>
    </div>
  </div>
</template>
<style lang="less" scoped>
.searchApp {
  margin: 10px;
}

.app {
  text-align: center;
  height: calc(~'100vh - 160px');
  overflow: hidden;

  .newCard {
    border: 2px dotted #1c2438;
    background-color: #eee;
  }

  .newCard img {
    width: 80px;
    height: auto;
  }

  .k-card {
    margin: 10px 10px;
    width: 17%;
    height: 200px;
    cursor: pointer;

    /deep/.k-card-body {
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .appdata {
      text-align: center;
      img {
        width: 150px;
        height: 100px;
      }
    }

    :last-child {
      .k-row:last-child {
        text-align: right;
      }
      h4 {
        text-align: left;
        color: dodgerblue;
      }
    }
  }
}

.newAppbtn {
  .k-btn {
    background: #fff;
    width: 30%;
  }
}
</style>

<style scoped>
.searchApp >>> .k-input {
  border-width: 0px 0px 2px 0px;
  background-color: #ddd;
  border-color: #000;
}

.searchApp >>> .k-input:hover {
  border-width: 0px 0px 2px 0px;
}

.searchApp >>> .k-input:active {
  border-width: 0px 0px 2px 0px;
}

.searchApp >>> .k-input:focus {
  border-width: 0px 0px 2px 0px;
  -webkit-box-shadow: 0 0 2px 0 rgba(45, 140, 240, 0.2);
  box-shadow: 0 0 2px 0 rgba(45, 140, 240, 0.2);
}
</style>
